<template>
  <div>
    <p>父组件: {{ num }}</p>
    <!-- <Child :value="num" @input="fn"></Child> -->
    <Child v-model="num"></Child>
  </div>
</template>

<script>
// 目标: 父子组件之间, 变量的"双向绑定"
// v-model指令原理
// v-model的vue变量, 赋予给当前所在标签的value属性中
// v-model还监测input事件, 事件里的值赋予给vue变量
// 外面num就和里面的value双向绑定到一起了
import Child from './Child'
export default {
  data () {
    return {
      num: 10
    }
  },
  components: {
    Child
  },
  methods: {
    fn (a) {
      this.num = a
    }
  }
}
</script>

<style>

</style>
